<template>
	<div class="markdown-editor-container">
		<el-row :gutter="20">
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<!-- <vab-markdown-editor ref="mde" v-model="model" @show-html="handleShowHtml"></vab-markdown-editor> -->
				<vab-quill v-model="model" :min-height="400" :options="options"></vab-quill>

				<el-button @click="handleAddText">增加文本</el-button>
				<el-button @click="handleAddImg">增加图片</el-button>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<el-card shadow="hover">
					<div slot="header">
						<span>markdown转换html实时演示区域;长度:{{model.length}},大约大小:{{(model.length/1024/1024).toFixed(2)}}MB</span>
					</div>
					<div v-html="model"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "MarkdownEditor",
		mixins: [common.baseVM],
		data() {
			return {
				model: "# vue-admin-beautiful",
				html: '<h1 id="vue-admin-beautiful">vue-admin-beautiful</h1>',

				options: {
					theme: 'snow',
					bounds: document.body,
					debug: 'warn',
					modules: {
						toolbar: [
							['bold', 'italic', 'underline', 'strike'],
							[{
								header: [1, 2, 3, 4, 5, 6, false]
							}],
							[{
								size: ['small', false, 'large', 'huge']
							}],
							[{
								color: []
							}, {
								background: []
							}],
							['blockquote', 'code-block'],
							[{
								list: 'ordered'
							}, {
								list: 'bullet'
							}],
							[{
								script: 'sub'
							}, {
								script: 'super'
							}],
							[{
								indent: '-1'
							}, {
								indent: '+1'
							}],
							[{
								align: []
							}],
							[{
								direction: 'rtl'
							}],
							[{
								font: []
							}],
							['clean'],
							//['link', 'image'],
							['image'],
						],
					},
					placeholder: '富文本内容...',
					readOnly: false,
				}
			};
		},
		methods: {
			handleAddText() {
				this.$refs.mde.add("\n### 新增加的内容");
			},
			handleAddImg() {
				this.$refs.mde.add(
					"\n![](https://gitee.com/chu1204505056/image/raw/master/qq_group/vab-2.png)"
				);
			},
			handleShowHtml(html) {
				this.html = html;
			},
		},
	};
</script>
